<template>
  <div class="home">
    <img class="swipslider_img" v-if="bannerUrl" :src="bannerUrl">
    <div class="lb">
      <img class="titleMore" :src="iconList.length > 0 ? iconList[0].picture : ''"
        @click="$router.push('/yearArticleList')" />
      <div class=" lbNDD">
        <div class="lbN">
          <div class="twItem" v-for="item in years" :key="item.id">
            <img :src="item.cover" @click="handleTW(item)" />
            <div class="tw_title">{{ item.coverTitle }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="lb">
      <img class="titleMore" :src="iconList.length > 1 ? iconList[1].picture : ''" @click="$router.push('/articles')" />
      <div class="imgList">
        <div class="imgItem" v-for="aItem in articles" :key="aItem.id">
          <img :src="aItem.cover" @click="handleClickZL(aItem)" />
          <div class="title">{{ aItem.coverTitle }}</div>
        </div>
      </div>
    </div>
    <div class="lb" style="margin-bottom: 1rem;">
      <img class="titleMore" :src="iconList.length > 2 ? iconList[2].picture : ''"
        @click=" $router.push('/videoTypes')" />
      <div class="videoList">
        <div class="imgItemSP" v-for="(vItem, index) in videos" @click="playVideo(vItem)" :key="index">
          <!-- <img v-show="!vItem.loaded" class="imgslt" :src="vItem.cover" /> -->
          <img class="bfImg" src="../assets/spbf.png" />
          <video :key="index" width="100%" height="100%" @loadeddata="onLoadedData(index)" :src="vItem.video + '#t=0.1'"
            preload="metadata" playsinline
            :poster="vItem.video + '?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_100,h_100,m_fast'" />
          <div class="video_title">{{ vItem.coverTitle }}</div>
        </div>
      </div>
    </div>
    <!-- 播放器 -->
    <video-play ref="refVideoPlay"></video-play>
  </div>
</template>
<style scoped src="../../public/css/styles.css"></style>
<script>
import VideoPlay from '@/components/VideoPlay.vue';
import { homeData, homeData1, homeData2, baseUrlImg, getBannerData, getFLIcon, clickCount } from '@/api/index.js'
export default {
  name: 'MainView',
  components: {
    VideoPlay,
  },
  data() {
    return {
      years: [],
      videos: [],
      articles: [],
      bannerUrl: "",
      iconList: [], //分类图标
    }
  },
  mounted() {
    this.getFLIconFunc()
    this.getYearsData()
    this.getArticlesData()
    this.getVideoData()
    this.getBannerData()
    this.clickCountFunc(1)
  },
  methods: {
    playVideo(item) {
      this.clickCountFunc(4, item.id)
      this.$refs.refVideoPlay.open(item.video);
    },
    getYearsData() {
      homeData().then(res => {
        if (res.rows && res.rows.length > 0) {
          const dataList = res.rows
          dataList.map((item) => {
            if (item.cover) {
              item.cover = baseUrlImg + item.cover
            }
          })
          this.years = dataList.splice(0, 6)
        } else {
          this.years = []
        }
      });
    },
    getArticlesData() {
      let params = {
        pageNum: 1,
        pageSize: 3
      }
      homeData1(params).then(res => {
        if (res.rows && res.rows.length > 0) {
          const dataList = res.rows
          dataList.map((item) => {
            if (item.cover) {
              item.cover = baseUrlImg + item.cover
            }
          })
          this.articles = dataList.splice(0, 2)
        } else {
          this.articles = []
        }
      });
    },
    getVideoData() {
      let params = {
        pageNum: 1,
        pageSize: 10000
      }
      homeData2(params).then(res => {
        if (res.rows && res.rows.length > 0) {
          const dataList = res.rows
          const tempList = []
          dataList.map((item) => {
            item.videoContent.map((data, index) => {
              if (index == 0) {
                let obj = {
                  id: item.id,
                  video: baseUrlImg + data,
                  cover: baseUrlImg + item.cover,
                  coverTitle: item.coverTitle
                }
                tempList.push(obj)
              }
            })
          })
          this.videos = tempList.splice(0, 2)
        } else {
          this.videos = []
        }
      });
    },

    onLoadedData(index) {
      const tempList = JSON.parse(JSON.stringify(this.videos))
      tempList[index].loaded = true
      this.videos = tempList
    },
    getRandomTwo(arr) {
      if (arr.length <= 6) {
        return arr.slice(0, 3);
      }
      const randomIndex = Math.floor(Math.random() * arr.length);
      const randomThree = arr.slice(randomIndex, randomIndex + 3);

      return randomThree;
    },
    //展览图片点击
    handleClickZL(item) {
      this.clickCountFunc(3, item.id)
      this.$router.push({
        name: 'articlePage',
        params: item
      })
    },
    //年代点击
    handleTW(item) {
      this.clickCountFunc(2, item.id)
      this.$router.push({
        name: 'yearsArticle',
        params: item
      })
    },
    //获取banner
    getBannerData() {
      getBannerData({}).then(res => {
        if (res.data) {
          this.bannerUrl = baseUrlImg + res.data
        } else {
          this.bannerUrl = ""
        }
      });
    },
    //获取分类图标
    getFLIconFunc() {
      getFLIcon({}).then(res => {
        if (res.data) {
          const dataList = res.data
          dataList.map((item) => {
            item.picture = baseUrlImg + item.picture
          })
          this.iconList = dataList
        } else {
          this.iconList = []
        }
      });
    },
    //点击统计
    clickCountFunc(type, typeld, typesubld) {
      let params = {
        type
      }
      if (typeld) {
        params['typeld'] = typeld
      }
      if (typesubld) {
        params['typesubld'] = typesubld
      }
      clickCount(params).then(res => {
      })
    }
  },
}
</script>
<style scoped>
.home {
  width: 100vw;
  height: 100vh;
  background: url(../assets/index_bj.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: 100% 100%;
  max-width: 640px;
  margin: 0 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.swipslider_img {
  width: 100%;
  object-fit: contain;
}

.titleMore {
  width: 100%;
  object-fit: contain;
  margin-top: 0.4rem;
}

.titleMore img {
  width: 100%;
}

.imgList {
  /* padding-left: 0.3rem; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.3rem;
}

.videoList {
  /* padding-left: 0.3rem; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.4rem;
}

.twItem {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.twItem img {
  width: 100%;
  aspect-ratio: 1000/587;
  /* object-fit: contain; */
}

.twItem .tw_title {
  font-size: 0.28rem;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
  line-height: 0.38rem;
  width: 100%;
}

.imgItem {
  margin-top: 0.2rem;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* background: white; */
  padding: 0.5rem;
  min-width: 0px;
  background-image: url('/public/images/img_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.imgItem .title {
  font-size: 0.3rem;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.2rem;
  line-height: 0.38rem;
  width: 100%;
}

.imgItem img {
  width: 100%;
  aspect-ratio: 1000/1333;
  /* object-fit: contain; */
}

.imgItemSP {
  margin-top: 0.2rem;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* background: white; */
  min-width: 0px;
}

.imgItemSP .video_title {
  font-size: 0.3rem;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.2rem 0rem;
  line-height: 0.38rem;
  width: 100%;
  box-sizing: border-box;
}

.imgItemSP img {
  width: 100%;
  object-fit: contain;
}

.bfImg {
  width: 0.6rem;
  height: 0.6rem;
  position: absolute;
}

@media only screen and (min-width:640px) {
  .lb {
    margin-top: 0;
  }

  .titleMore {
    margin-top: 0.2rem;
  }

  .imgList {
    grid-gap: 0.2rem;
  }

  .videoList {
    grid-gap: 0.1rem;
  }

  .imgItem {
    padding: 0.15rem;
  }

  .twItem .tw_title {
    font-size: 0.15rem;
  }

  .imgItem .title {
    font-size: 0.15rem;
    line-height: 0.15rem;
    margin-top: 0.1rem;
  }

  .lbN {
    grid-gap: 0.1rem;
  }

  .lbNDD {
    padding-top: 0.2rem;
  }

  .bfImg {
    width: 0.3rem;
    height: 0.3rem;
  }

  .imgItemSP .video_title {
    font-size: 0.15rem;
    line-height: 0.2rem;
    padding: 0.1rem 0;
  }
}
</style>